/*
  Multimedia Player Code
 */

%multimedia-display-none {
	display: none;
}

%multimedia-controls-outline {
	&:focus {
		outline: 1px solid $mm-ctrl-outline-color;
	}
}

%slider-polyfill-background {
	background: $mm-volume-bg-color;
	border: 0;
}

%multimedia-xxsmall-ui-panels {
	padding-top: 2em;
}

@mixin multimedia-overlay-loading {
	.display {
		@extend %global-loading;

		position: relative;

		&:before,
		&:after {
			display: block;
		}
	}
}

@mixin multimedia-overlay-base {
	.display {
		@extend %global-centered-overlay;

		cursor: pointer;
		position: relative;
	}
}

@mixin multimedia-overlay-play {
	.display {
		&:before {
			text-align: center;
		}

		&:after {
			color: #fff;
			content: "";

			// TODO: Use Bootstrap's placeholder when nested extends are supported
			font-family: "Glyphicons Halflings";
			font-size: 65px;
			text-align: center;
		}
	}
}

%controls-offset {
	display: block;
	width: 100%;
}

%captions-hidden {
	max-height: 0;
	padding: 0;
}

%captions-text-box {
	display: table-cell;
	height: #{$line-height-base * $mm-cc-lines}em;
	vertical-align: middle;
}

.wb-mltmd {
	// lets fight the FOUC
	// base state
	display: block;
	position: relative;

	&.video {
		&:not(.playing):not(.waiting):not(.youtube) {
			@include multimedia-overlay-base;
			@include multimedia-overlay-play;
		}

		&.waiting {
			@include multimedia-overlay-loading;
		}
	}

	&.audio {
		.lastpnl {
			@extend %multimedia-display-none;
		}

		object {
			position: absolute;
		}
	}

	video {
		@extend %controls-offset;

		height: auto;
		width: 100%;
	}

	object,
	iframe {
		@extend %controls-offset;
	}

	&.cc_on {
		.wb-mm-cc {
			display: table;
			height: calc(#{$line-height-base * $mm-cc-lines}em + #{$mm-cc-padding * 2});
			padding: $mm-cc-padding;
		}

		&:not(.errmsg) {
			.cc {
				&:after {
					border-bottom: 3px solid $mm-ctrl-cc-color;
					content: " ";
					display: block;
					margin-left: -2px;
					width: 1.2em;
				}
			}
		}
	}

	&.youtube {
		&.cc_on {
			.wb-mm-cc {
				@extend %multimedia-display-none;
			}
		}
	}

	/*
	  Light Skinning of mediacontrols
	 */
	&.skn-lt {
		border-bottom: 1px solid #ddd;
		color: #000;

		.wb-mm-ctrls {
			background: #fff;
			color: #000;

			.btn {
				background: #fff;
				border: 0;
				color: #000;

				&[disabled] {
					&:active {
						&:hover {
							color: #000;
						}
					}
				}
			}
		}
	}

	.wb-share {
		text-align: right;
	}

	summary,
	details[open] {
		border-top-left-radius: 0;
		border-top-right-radius: 0;
	}
}

.wb-mm-cc {
	@extend %captions-hidden;

	background-color: $mm-cc-bg-color;
	color: $mm-cc-fg-color;
	text-align: center;
	transition: all .26s ease;
	width: 100%;

	&:before {
		@extend %captions-text-box;

		content: " ";
	}

	div {
		@extend %captions-text-box;
	}
}

%pnl {
	display: table-cell;
	vertical-align: middle;
}

.wb-mm-ctrls {
	background: $mm-ctrl-bg-color;
	color: $mm-ctrl-fg-color;
	display: table;
	padding-top: 2em;
	position: relative;
	width: 100%;

	.btn {
		@extend %multimedia-controls-outline;

		background: transparent;
		border: 0;
		color: $mm-ctrl-fg-color;
		font-size: 130%;
		border-top: {
			left-radius: 0 !important;
			right-radius: 0 !important;
		}

		&[disabled] {
			&:active {
				&:hover {
					color: $mm-ctrl-fg-color;
				}
			}

			&:hover {
				background-color: transparent;
			}
		}
	}

	.fs {
		display: none;

		.wb-mltmd[data-fullscreen-btn] & {
			display: block;
		}
	}

	.frstpnl {
		@extend %pnl;

		text-align: center;
		width: 13em;
	}

	.lastpnl {
		@extend %pnl;

		text-align: center;
		width: 3em;

		.wb-mltmd[data-fullscreen-btn] & {
			width: 6em;
		}
	}

	.tline {
		@extend %pnl;

		.wb-mm-tmln-crrnt {
			&:after {
				content: " / ";
				padding: 0 .5em;
			}
		}
	}

	.wb-mm-txtonly {
		padding: 0 1em;

		p {
			display: inline;
		}
	}

	.wb-mm-txtonly,
	.wb-mm-prgrss {
		display: table-cell;
		vertical-align: middle;
	}

	/* Progress Bar */
	progress {
		@extend %multimedia-controls-outline;

		/* Important Thing */
		appearance: none;
		background: $mm-progress-bg-color;
		background-clip: padding-box;
		border: 7px solid #3e3e3e;
		border-radius: 14px;
		color: $mm-progress-fg-color;
		display: block;
		height: 30px;
		left: 0;
		padding: 2px;
		position: absolute;
		top: 0;
		width: 100%;

		&.wb-progress-inited {
			overflow: hidden;
			padding: 0;
		}

		&::-webkit-progress-bar {
			background: $mm-progress-bg-color;
		}

		&::-webkit-progress-value {
			background: $mm-progress-fg-color;
			border-radius: 7px;
		}

		&::-moz-progress-bar {
			background: $mm-progress-fg-color;
			border-radius: 7px;
		}
	}

	.progress {
		height: 22px;
	}

	input {
		&[type="range"] {
			@extend %multimedia-controls-outline;

			appearance: none;
			background: transparent;
			display: inline-block;
			height: 2.5em;
			padding: 0;
			width: 7em;

			&:focus {
				/* Prevent Webkit/Blink browsers from defaulting to a -2px outline offset. */
				outline-offset: 0;
			}

			&::-webkit-slider-runnable-track {
				background: $mm-volume-bg-color;
				height: 4px;
			}

			&::-webkit-slider-thumb {
				appearance: none;
				background: $mm-volume-thumb-color;
				border: $mm-volume-thumb-border;
				box-sizing: content-box;
				height: $mm-volume-thumb-height;
				margin-top: -9px;
				width: $mm-volume-thumb-width;
			}

			&::-moz-range-track {
				background: $mm-volume-bg-color;
				border: 0;
			}

			&::-moz-range-thumb {
				background: $mm-volume-thumb-color;
				border: $mm-volume-thumb-border;
				border-radius: 0;
				height: $mm-volume-thumb-height;
				width: $mm-volume-thumb-width;
			}

			&::-ms-track {
				border: 0;
				color: transparent;
				height: 4px;
			}

			&::-ms-fill-upper {
				background: $mm-volume-bg-color;
			}

			&::-ms-fill-lower {
				background: $mm-volume-bg-color;
			}

			&::-ms-thumb {
				background: $mm-volume-thumb-color;
				border: $mm-volume-thumb-border;
				height: $mm-volume-thumb-height;
				width: $mm-volume-thumb-width;
			}
		}
	}

	/* Slider polyfill styles */
	.fd-slider {
		display: inline-block;
		height: 100%;
		margin-top: 10px;
		width: 7em;
	}

	.fd-slider-bar {
		@extend %slider-polyfill-background;
	}

	.fd-slider-range {
		@extend %slider-polyfill-background;
	}

	.fd-slider-handle {
		background: $mm-volume-thumb-color;
		border: $mm-volume-thumb-border;
		box-sizing: content-box;
		width: $mm-volume-thumb-width;
	}
}


.xxsmallview {
	.wb-mm-ctrls {
		.frstpnl {
			@extend %multimedia-xxsmall-ui-panels;
		}

		.lastpnl {
			@extend %multimedia-xxsmall-ui-panels;
		}

		.wb-mm-txtonly {
			left: 0;
			margin-top: -2em;
			position: absolute;
		}
	}
}
